<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下属性和属性值 
		css()             功能:
		                  1个参： 传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性值
						  2个参：传入css属性名和属性值
						  功能：设置匹配元素集合中所有元素的css属性值
						  n个参：传入多个css属性名和属性值
						  语法糖：css({“属性名”："属性值"，
						  ......
						  “属性名”："属性值"，
						  })
		
		
		width()和height()  功能：匹配元素集合中第一个元素的宽高度
		                   无参：获取元素集合中第一个元素的宽高度
						   有参：设置元素集合中第一个元素的宽高度
						   wideth(数值)
		outerWidth()和outerHeight()
		出现原因：元素存在于盒子当中，盒子模型，宽度计算方式：内外边距+边框+内容
		无参：获取元素的宽高度，计算盒子模型：内边距+边框
		有参：传入bool值，true时，计算盒子模型：内外边距+边框
		
		
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.box{
				background-color: #ffff00;
				margin: 20px;
				padding: 20px;
				border: 5px solid #00aaff;
                    
				
			}
			.result{
				margin: 10px;
				font-weight: 700;
			}
		</style>
	</head>
	<body>
		<!-- 显示效果区域 -->
		<div class="box"  id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setbtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度(内边距+边框)</button>
		<button id="bpmBtn">获取高度(内外边距+边框)</button>
		<!-- 结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/*1.点击   获取颜色属性值   按钮  获取颜色值并打印页面*/
			$("#getColorbtn").click(function(){
				// 获取css属性值方式：传入属性名即可
			var bgColor=$(".box").css("background-color");
			/* 页面上打印属性值  rgb(255, 255, 0)*/
			$(".result").text("你的颜色属性值是"+bgColor);
			});
			/*2.点击   设置颜色属性值   按钮  颜色值并打印页面*/
			$("#setColorbtn").click(function(){
				$(".box").css("background-color","aqua");
				var bg=$(".box").css("background-color");
				$(".result").text("改变后颜色是"+bg);
			});
			/* 3.点击 设置多属性效果 按钮 圆 背景色，阴影*/
			 $("#setbtn").click(function(){
				 $(".box").css({
				 "width":"300px",
				 "height":"300px",
				 "border-radius":"50%",
				 "box-shadow":"0 8px 8px black",
				 "background-image": "url(../img/dfc.jpg) ",
				 "background-size":"100% 100%"
				 });
			 });
			 /* 4.点击   获取、设置宽度*/
			 $("#gsBtn").click(function(){
				var gs= $(".box").width(400);
				$(".result").text("获取的宽度是"+gs+"px");	
			 });
			 /* 5.点击 获取高度 按钮  计算box空间高度*/
			 $("#bpBtn").click(function(){
				var bp= $(".box").outerHeight();
				 $(".result").text("获取的高度是"+bp+"px");
			 });
			 $("#bpmBtn").click(function(){
			 				var bpm= $(".box").outerHeight(true);
			 				 $(".result").text("获取的高度是"+bpm+"px");
			 });
		</script>
	</body>
</html>